<template>
  <view class="song_people">
    <scroll-view scroll-y @scrolltolower="scrollTolower" class="scroll">
      <view class="songPeople_container">
        <view class="keysPeopleInfo" v-for="item in artists" :key="item.id">
          <image :src="item.picUrl" mode=""></image>
          <text style="color: #668ebd;">{{ item.name }}</text>
          <view class="isPay">
            <text v-if="item.followed === true" class="pay" @click="payAttention('wyf', item.accountId, item)">已关注</text>
            <text v-else class="pay" @click="payAttention(1, item.accountId, item)">{{ '   +' }}关注</text>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" icon-type />
    </scroll-view>
  </view>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { getSearchKeytype } from '@/api/getSearchKeytype.js'
export default {
  name: 'song-people',
  computed: {
    ...mapState(['keyValue']),
    ...mapState('login', ['cookie'])
    // ...mapState({ cookie: state => state.login.cookie, keyValue: state => state.keyValue })
  },
  created() {
    // setTimeout(()=>{
      this.getSongsPeople(100, this.keyValue, this.limit)
    // },1000)
    
  },
  data() {
    return {
      artists: [],
      totalPage: 0,
      t: 0,
      status: 'loadmore',
      page: 1,
      limit: 10
    }
  },
  methods: {
    async getSongsPeople(type, value, limit) {
      const { data: res } = await getSearchKeytype(type, value, limit)
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('歌手数据获取失败')
      this.totalPage = Math.ceil(res.result.artistCount / res.result.artists.length)
      this.artists = res.result.artists
      // console.log(this.totalPage);
    },
    scrollTolower() {
      if (this.page >= this.totalPage) {
        this.status = 'nomore'
        // console.log(2222)
        uni.showToast({
          title: '没有下一页了'
        })
      } else {
        setTimeout(() => {
          // console.log(1111)
          this.page++
          this.limit += 10
          this.status = 'loading'
          this.getSongsPeople(100, this.keyValue, this.limit)
        }, 1000)
      }
    },
    async payAttention(t, id, item) {
      this.t = t
      if (!this.cookie) {
        uni.$showMsg('请先登录哦')
      } else {
        const { data: res } = await uni.$http.get('follow', { id: id, t: this.t,timestamp: new Date().getTime() })
        // console.log(res)
        if (this.t === 1) {
          if (res.code !== 200) {
            return uni.$showMsg('关注失败')
          } else {
          
            item.followed = res.user.followed
          }
        } else {
          if (res.code !== 200) {
            return uni.$showMsg('取关失败')
          } else {
            item.followed = false
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll {
  height: calc(100vh - 160rpx);
}
.song_people {
  background-color: #ffffff;
}
.songPeople_container {
  // margin: 40rpx;
}
.keysPeopleInfo {
  display: flex;
  // align-items: center;
  margin: 30rpx 20rpx 0 20rpx;
  border-bottom: 5rpx solid #f7f7f7;
  // height: 80rpx;
}
.keysPeopleInfo text {
  line-height: 80rpx;
  margin-left: 30rpx;
}
.keysPeopleInfo image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.isPay {
  position: absolute;
  right: 100rpx;
}
.isPay text {
  border: 2rpx solid #fe6f6f;
  border-radius: 20rpx;
  padding: 5rpx 20rpx;
  font-size: 20rpx;
  color: #fe6f6f;
}
</style>
